import React, { useState } from 'react';
import { Card, Steps, Button, Input, Table, Tag, Space, Checkbox, Pagination, message } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

const { Step } = Steps;

// mock 班级
const classTags = [
  '高一班', '高二班', '高三班', '高一四班', '高一五班', '高一六班', '高一七班',
  '高一八班', '高一九班', '高一十班', '高一十一班', '高一十二班', '高一十三班', '高一十四班', '高一十五班', '高一十六班', '高一十七班'
];

// mock 学生数据
const allStudents = Array.from({ length: 50 }).map((_, i) => ({
  key: i + 1,
  name: ['李大勇', '刘亦菲', '王晓青', '张玉玉', '华宇轩'][i % 5],
  gender: i % 2 === 0 ? '女' : '男',
  sno: '202010123',
  idno: '140802199809786478',
  school: '新学道顺诚学校',
  grade: '一年级',
  class: '一班',
}));

export default function Student() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([1,2,3,4,5,6]);
  const [data, setData] = useState(allStudents);
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(2);
  const [pageSize, setPageSize] = useState(10);

  // 搜索功能
  const onSearch = val => {
    setSearch(val);
    setPage(1);
    if (!val) {
      setData(allStudents);
    } else {
      setData(allStudents.filter(item => item.name.includes(val) || item.sno.includes(val)));
    }
  };

  // 批量删除
  const handleBatchDelete = () => {
    if (selectedRowKeys.length === 0) return message.warning('请先选择学生');
    setData(prev => prev.filter(item => !selectedRowKeys.includes(item.key)));
    setSelectedRowKeys([]);
    message.success('批量删除成功');
  };

  // 全部删除
  const handleAllDelete = () => {
    setData([]);
    setSelectedRowKeys([]);
    message.success('全部删除成功');
  };

  // 单行删除
  const handleDelete = key => {
    setData(prev => prev.filter(item => item.key !== key));
    setSelectedRowKeys(keys => keys.filter(k => k !== key));
    message.success('删除成功');
  };

  // 添加学生（mock）
  const handleAdd = () => {
    message.info('添加学生功能开发中');
  };

  // 分页数据
  const pagedData = data.slice((page - 1) * pageSize, page * pageSize);

  const columns = [
    {
      title: <Checkbox
        indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < pagedData.length}
        checked={pagedData.length > 0 && selectedRowKeys.length === pagedData.length}
        onChange={e => {
          const keys = e.target.checked ? pagedData.map(item => item.key) : [];
          setSelectedRowKeys(keys);
        }}
      />,
      dataIndex: 'select',
      width: 50,
      render: (_, record) => (
        <Checkbox
          checked={selectedRowKeys.includes(record.key)}
          onChange={e => {
            setSelectedRowKeys(keys => e.target.checked ? [...keys, record.key] : keys.filter(k => k !== record.key));
          }}
        />
      ),
    },
    { title: '姓名', dataIndex: 'name', align: 'center' },
    { title: '性别', dataIndex: 'gender', align: 'center' },
    { title: '学号', dataIndex: 'sno', align: 'center' },
    { title: '证件号', dataIndex: 'idno', align: 'center' },
    { title: '学校', dataIndex: 'school', align: 'center' },
    { title: '年级', dataIndex: 'grade', align: 'center' },
    { title: '行政班级', dataIndex: 'class', align: 'center' },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_, record) => <a style={{ color: '#1677ff' }} onClick={() => handleDelete(record.key)}>删除</a>
    },
  ];

  return (
    <div style={{ padding: 16, background: '#f5f6fa', minHeight: '100vh' }}>
      <Card style={{ borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 16 }}>选课设置 &gt; 创建选课</div>
        <Steps current={1} style={{ marginBottom: 32 }}>
          <Step title="基本信息" />
          <Step title="选课学生" />
          <Step title="选课设置" />
        </Steps>
        <div style={{ background: '#f7f9fa', borderRadius: 8, padding: 16, marginBottom: 16 }}>
          <div style={{ marginBottom: 8 }}>
            已选择班级：{classTags.map(tag => <Tag key={tag} color="blue" style={{ marginBottom: 4 }}>{tag}</Tag>)}
          </div>
          <Space style={{ marginBottom: 8 }}>
            <Button icon={<PlusOutlined />} onClick={handleAdd}>添加学生</Button>
            <Button icon={<DeleteOutlined />} onClick={handleBatchDelete}>批量删除</Button>
            <Button icon={<DeleteOutlined />} onClick={handleAllDelete}>全部删除</Button>
          </Space>
          <Input.Search
            placeholder="请输入姓名、学号查找学生"
            allowClear
            onSearch={onSearch}
            style={{ width: 260, float: 'right', marginBottom: 8 }}
          />
        </div>
        <Table
          columns={columns}
          dataSource={pagedData}
          pagination={false}
          bordered
          rowKey="key"
          style={{ background: '#fff', borderRadius: 8 }}
        />
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 16 }}>
          <Pagination
            current={page}
            pageSize={pageSize}
            total={data.length}
            showSizeChanger
            pageSizeOptions={['10', '20', '50']}
            onChange={setPage}
            onShowSizeChange={(_, size) => { setPageSize(size); setPage(1); }}
            showQuickJumper
            style={{ marginRight: 8 }}
          />
        </div>
      </Card>
    </div>
  );
}
